Odpowiedzi na to pytanie są wysiłkiem społeczności. Edytuj istniejące odpowiedzi, aby ulepszyć ten post. Obecnie nie przyjmuje nowych odpowiedzi ani interakcji. Jak mogę przekierować użytkownika z jednej strony na drugą za pomocą jQuery lub czystego JavaScript?
1
2
Kolejny
Nie wystarczy po prostu przekierować za pomocą jQuery
jQuery nie jest konieczne, a window.location.replace (...) najlepiej symuluje przekierowanie HTTP.
window.location.replace (...) jest lepsze niż użycie window.location.href, ponieważ replace () nie zachowuje strony źródłowej w historii sesji, co oznacza, że użytkownik nie utknie w niekończącej się przycisk fiasko.
Jeśli chcesz zasymulować kliknięcie łącza, użyj
location.href
Jeśli chcesz zasymulować przekierowanie HTTP, użyj location.replace
Na przykład:
// podobne zachowanie jak przy przekierowaniu HTTP
window.location.replace („http://stackoverflow.com”);
// podobne zachowanie jak kliknięcie linku
window.location.href = "http://stackoverflow.com";
|
OSTRZEŻENIE: Ta odpowiedź została podana jedynie jako możliwe rozwiązanie; nie jest to oczywiście najlepsze rozwiązanie, ponieważ wymaga jQuery. Zamiast tego preferuj czyste rozwiązanie JavaScript.
$ (lokalizacja) .attr ('href', 'http://stackoverflow.com')
|
Standardowy "zwykły" JavaScript w celu przekierowania strony
window.location.href = 'newPage.html';
Lub prościej: (ponieważ okno jest globalne)
location.href = 'newPage.html';
Jeśli jesteś tutaj, ponieważ tracisz HTTP_REFERER podczas przekierowywania, czytaj dalej:
(W przeciwnym razie zignoruj tę ostatnią część)
Poniższa sekcja jest przeznaczona dla osób używających protokołu HTTP_REFERER jako jednego z wielu środków bezpieczeństwa (chociaż nie jest to świetny środek ochronny). Jeśli używasz przeglądarki Internet Explorer 8 lub starszej, te zmienne zostaną utracone podczas korzystania z dowolnej formy przekierowania strony JavaScript (lokalizacja.href itp.).
Poniżej zaimplementujemy alternatywę dla IE8 i niższych, aby nie stracić HTTP_REFERER. W przeciwnym razie prawie zawsze możesz po prostu użyć window.location.href.
Testowanie pod kątem HTTP_REFERER (wklejanie adresu URL, sesja itp.) Może pomóc stwierdzić, czy żądanie jest uzasadnione.
(Uwaga: istnieją również sposoby obejścia / sfałszowania tych odsyłających, o czym informuje link droop w komentarzach)
Proste rozwiązanie do testowania w różnych przeglądarkach (powrót do window.location.href dla Internet Explorera 9+ i wszystkich innych przeglądarek)
Sposób użycia: przekierowanie („anotherpage.aspx”);
function redirect (url) {
var ua = navigator.userAgent.toLowerCase (),
isIE = ua.indexOf ('msie')! == -1,
wersja = parseInt (ua.substr (4, 2), 10);
// Internet Explorer 8 i starsze
if (isIE && wersja <9) {
var link = document.createElement ('a');
link.href = url;
document.body.appendChild (link);
link.click ();
}
// Wszystkie inne przeglądarki mogą używać standardowego window.location.href (nie tracą HTTP_REFERER jak Internet Explorer 8 i starsze)
else {
window.location.href = url;
}
}
|
Można to zrobić na wiele sposobów.
// window.location
window.location.replace („http://www.example.com”)
window.location. assign („http://www.example.com”)
window.location.href = 'http://www.example.com'
document.location.href = '/ path'
// window.history
window.history.back ()
window.history.go (-1)
// window.navigate; TYLKO dla starszych wersji przeglądarki Internet Explorer
window.navigate („top.jsp”)
// Prawdopodobnie nie ma bueno
self.location = 'http://www.example.com';
top.location = 'http://www.example.com';
// jQuery
$ (lokalizacja) .attr ('href', 'http: //www.example.com')
$ (okno) .attr ('lokalizacja', 'http: //www.example.com')
$ (lokalizacja) .prop („href”, „http://www.example.com”)
|
Działa to dla każdej przeglądarki:
window.location.href = 'twój_url';
|
Pomogłoby, gdybyś był trochę bardziej opisowy w tym, co próbujesz zrobić. Jeśli próbujesz wygenerować stronicowane dane, istnieje kilka możliwości, jak to zrobić. Możesz wygenerować osobne linki dla każdej strony, do której chcesz mieć bezpośredni dostęp.
1
2
3
...
Zwróć uwagę, że bieżąca strona w przykładzie jest obsługiwana inaczej w kodzie i w CSS.
Jeśli chcesz, aby dane stronicowane były zmieniane przez AJAX, w tym miejscu pojawi się jQuery. Wystarczy dodać moduł obsługi kliknięć do każdego znacznika zakotwiczenia odpowiadającego innej stronie. Ten moduł obsługi kliknięć wywołałby kod jQuery, który pobiera następną stronę za pośrednictwem AJAX i aktualizuje tabelę o nowe dane. Poniższy przykład zakłada, że masz usługę internetową, która zwraca dane nowej strony.
$ (document) .ready (function () {
$ ('a.pager-link'). click (function () {
var page = $ (this) .attr ('href'). split (/ \? /) [1];
$ .ajax ({
typ: 'POST',
url: '/ path-to-service',
dane: strona,
success: function (content) {
$ ('# myTable'). html (zawartość); // zastąpić
}
});
return false; // aby zatrzymać link
});
});
|
Myślę też, że location.replace (URL) to najlepszy sposób, ale jeśli chcesz powiadomić wyszukiwarki o Twoim przekierowaniu (nie analizują kodu JavaScript, aby zobaczyć przekierowanie), powinieneś dodać meta rel = "canonical" do swojej witryny.
Dodanie sekcji noscript z metatagiem odświeżania HTML jest również dobrym rozwiązaniem. Proponuję skorzystać z tego narzędzia do przekierowywania JavaScripttworzyć przekierowania. Obsługuje również przeglądarkę Internet Explorer do przekazywania strony odsyłającej HTTP.
Przykładowy kod bez opóźnienia wygląda następująco:
|
Ale jeśli ktoś chce przekierować z powrotem na stronę główną, może użyć następującego fragmentu.
window.location = window.location.host
Byłoby pomocne, gdybyś miał trzy różne środowiska, takie jak programowanie, przemieszczanie i produkcja.
Możesz eksplorować ten obiekt window.location, po prostu umieszczając te słowa w konsoli Chrome lub konsoli Firebug.
|
JavaScript udostępnia wiele metod pobierania i zmiany bieżącego adresu URL wyświetlanego w pasku adresu przeglądarki. Wszystkie te metody wykorzystują obiekt Location, który jest właściwością obiektu Window. Możesz utworzyć nowy obiekt lokalizacji z bieżącym adresem URL w następujący sposób.
var currentLocation = window.location;
Podstawowa struktura adresu URL
//:/
Protokół - określa nazwę protokołu używanego do uzyskiwania dostępu do zasobu w Internecie. (HTTP (bez SSL) lub HTTPS (z SSL))
nazwa hosta - nazwa hosta określa hosta będącego właścicielem zasobu. Na przykład www.stackoverflow.com. Serwer świadczy usługi przy użyciu nazwy hosta.
port - numer portu używany do rozpoznawania określonego procesu, do którego ma zostać przekazana wiadomość internetowa lub inna wiadomość sieciowa po dotarciu na serwer.
nazwa_ścieżki - ścieżka zawiera informacje o określonym zasobie na hoście, do którego klient WWW chce uzyskać dostęp. Na przykład stackoverflow.com/index.html.
zapytanie - ciąg zapytania następuje po składniku ścieżki i dostarcza ciąg informacji, które zasób może wykorzystać w jakimś celu (na przykład jako parametry wyszukiwania lub dane do przetworzenia).
hash - zakotwiczona część adresu URL, zawiera znak krzyżyka (#).
Za pomocą tych właściwości obiektu Location można uzyskać dostęp do wszystkich tych składników adresu URL
hash - ustawia lub zwraca zakotwiczoną część adresu URL.
host -Sets
lub zwraca nazwę hosta i port adresu URL.
nazwa hosta -Sets lub
zwraca nazwę hosta adresu URL.
href -Ustawia lub zwraca całość
URL.
nazwa_ścieżki - ustawia lub zwraca nazwę ścieżki adresu URL.
port - ustawia lub zwraca numer portu, którego serwer używa dla adresu URL.
protokół - ustawia lub zwraca protokół adresu URL.
szukaj -Sets
lub zwraca część adresu URL zawierającą zapytanie
Teraz Jeśli chcesz zmienić stronę lub przekierować użytkownika na inną stronę możesz użyć właściwości href obiektu Location w ten sposób
Możesz użyć właściwości href obiektu Location.
window.location.href = "http://www.stackoverflow.com";
Obiekt Location ma również te trzy metody
przypisać () - ładuje nowy dokument.
reload () - Ponownie ładuje bieżący dokument.
replace () - zastępuje aktualny dokument nowym
Możesz użyć metod assign () i replace również do przekierowania na inne strony, takie jak te
location. assign („http://www.stackoverflow.com”);
location.replace („http://www.stackoverflow.com”);
Czym się różnią metody assign () i replace () - różnica między metodą replace () i metoda assign () () polega na tym, że funkcja replace () usuwa adres URL bieżącego dokumentu z historii dokumentu, co oznacza, że nie można go użyć przycisk „wstecz”, aby przejść z powrotem do oryginalnego dokumentu. Dlatego użyj metody assign (), jeśli chcesz załadować nowy dokument i dać opcję powrotu do oryginalnego dokumentu.
Możesz zmienić właściwość href obiektu lokalizacji za pomocą jQuery również w ten sposób
$ (lokalizacja) .attr ('href', url);
Dzięki temu możesz przekierować użytkownika do innego adresu URL.
|
Zasadniczo jQuery to tylko framework JavaScript i do robienia niektórych rzeczy, takich jak przekierowanie w tym przypadku, możesz po prostu użyć czystego JavaScript, więc w tym przypadku masz 3 opcje używając waniliiJavaScript:
1) Korzystanie z zamiany lokalizacji spowoduje zastąpienie bieżącej historii strony, co oznacza, że nie można użyć przycisku Wstecz, aby wrócić do oryginalnej strony.
window.location.replace („http://stackoverflow.com”);
2) Korzystając z przypisania lokalizacji, zachowa to historię dla Ciebie, a używając przycisku Wstecz, możesz wrócić do pierwotnej strony:
window.location. assign („http://stackoverflow.com”);
3) Zalecam użycie jednego z tych poprzednich sposobów, ale może to być trzecia opcja wykorzystująca czysty JavaScript:
window.location.href = "http://stackoverflow.com";
Możesz również napisać funkcję w jQuery, aby ją obsłużyć, ale nie jest to zalecane, ponieważ jest to tylko jedna linia czysta JavaScript, możesz również używać wszystkich powyższych funkcji bez okna, jeśli jesteś już w zasięgu okna, na przykład window.location.replace („http://stackoverflow.com”); może to być location.replace („http://stackoverflow.com”);
Pokazuję je wszystkie na poniższym obrazku:
|
Powinien być możliwy do ustawienia za pomocą window.location.
Przykład:
window.location = "https://stackoverflow.com/";
Oto poprzedni post na ten temat: Jak przekierować na inną stronę internetową?
|
Zanim zacznę, jQuery jest biblioteką JavaScript używaną do manipulacji DOM. Dlatego nie powinieneś używać jQuery do przekierowania strony.
Cytat z Jquery.com:
Chociaż jQuery może działać bez większych problemów w starszych wersjach przeglądarek,
nie testujemy w nich aktywnie jQuery i generalnie nie naprawiamy błędów
które mogą się w nich pojawić.
Znaleziono go tutaj:
https://jquery.com/browser-support/
Tak więc jQuery nie jest kompleksowym rozwiązaniem zapewniającym zgodność wsteczną.
Poniższe rozwiązanie wykorzystujące surowy JavaScript działa we wszystkich przeglądarkach i od dawna jest standardowe, więc nie potrzebujesz żadnych bibliotek do obsługi wielu przeglądarek.
Ta strona przekieruje do Google po 3000 milisekund
przykład
Wkrótce nastąpi przekierowanie do Google.
Różne opcje są następujące:
window.location.href = "url"; // Symuluje normalną nawigację do nowej strony
window.location.replace ("url"); // Usuwa bieżący adres URL z historii i zastępuje go nowym adresem URL
window.location. assign ("url"); // Dodaje nowy adres URL do stosu historii i przekierowuje do nowego adresu URL
window.history.back (); // Symuluje kliknięcie przycisku wstecz
window.history.go (-1); // Symuluje kliknięcie przycisku wstecz
window.history.back (-1); // Symuluje kliknięcie przycisku Wstecz
window.navigate ("strona.html"); // Tak samo jak window.location = "url"
Podczas korzystania z zamiany przycisk Wstecz nie wróci do strony przekierowania, jakby nigdy jej nie było w historii. Jeśli chcesz, aby użytkownik mógł powrócić do strony przekierowania, użyj window.location.href lub window.location. assign. Jeśli korzystasz z opcji, która pozwala użytkownikowi wrócić do strony przekierowującej, pamiętaj, że po wejściu na stronę przekierowującą przekieruje Cię z powrotem. Więc weź to pod uwagę, wybierając opcję przekierowania. W warunkach, w których strona przekierowuje tylko wtedy, gdy akcja jest wykonywana przez użytkownika, umieszczenie strony w historii przycisku Wstecz będzie w porządku. Ale jeśli strona automatycznie przekierowuje, powinieneś użyć zamiany, aby użytkownik mógł użyć przycisku Wstecz bez konieczności powrotu do strony, którą przekierowuje.
Możesz również użyć metadanych, aby uruchomić przekierowanie strony w następujący sposób.
META Refresh
Lokalizacja META
BASE Hijacking
Odejdź
Odejdź
Jeśli połączysz razem dwa przykłady stron, uzyskasz pętlę dla niemowląt, która przekieruje tozagwarantuje, że Twój użytkownik nigdy więcej nie będzie chciał korzystać z Twojej witryny.
|
var url = 'asdf.html';
window.location.href = url;
|
Możesz to zrobić bez jQuery jako:
window.location = "http://twojadomena.com";
A jeśli chcesz tylko jQuery, możesz to zrobić tak:
$ jq (okno) .attr ("lokalizacja", "http://twojadomena.com");
|
Działa to z jQuery:
$ (okno) .attr ("lokalizacja", "http://google.fr");
|
# Przekierowanie strony HTML przy użyciu metody jQuery / JavaScript
Wypróbuj ten przykładowy kod:
funkcja YourJavaScriptFunction ()
{
var i = $ ('# login'). val ();
if (i == 'login')
window.location = "Login.php";
jeszcze
window.location = "Logout.php";
}
Jeśli chcesz podać pełny adres URL jako window.location = "www.google.co.in" ;.
|
Oryginalne pytanie: „Jak przekierować za pomocą jQuery?”, Stąd odpowiedź implementuje jQuery >> Bezpłatny przypadek użycia.
Aby po prostu przekierować do strony z JavaScriptem:
window.location.href = "/ contact /";
Lub jeśli potrzebujesz opóźnienia:
setTimeout (function () {
window.location.href = "/ contact /";
}, 2000); // Czas w milisekundach
jQuery pozwala z łatwością wybierać elementy ze strony internetowej. Możesz znaleźć wszystko, co chcesz na stronie, a następnie użyć jQuery, aby dodać efekty specjalne, reagować na działania użytkownika lub wyświetlać i ukrywać zawartość wewnątrz lub na zewnątrz wybranego elementu. Wszystkie te zadania zaczynają się od wiedzy, jak wybrać element lub wydarzenie.
$ ('a, img'). on ('click', function (e) {
e.preventDefault ();
$ (this) .animate ({
krycie: 0 // Umieść tutaj trochę animacji CSS
}, 500);
setTimeout (function () {
// OK, skończony personel jQuery, przejdźmy do przekierowania
window.location.href = "/ contact /";
}, 500);
});
Wyobraź sobie, że ktoś napisał skrypt / wtyczkę z 10000 liniami kodu. Dzięki jQuery możesz połączyć się z tym kodem za pomocą jednej lub dwóch linii.
|
Musisz umieścić tę linię w swoim kodzie:
$ (lokalizacja) .attr ("href", "http://stackoverflow.com");
Jeśli nie masz jQuery, skorzystaj z JavaScript:
window.location.replace („http://stackoverflow.com”);
window.location.href („http://stackoverflow.com”);
|
Pytanie brzmi więc, jak zrobić stronę przekierowującą, a nie jak przekierować na stronę internetową?
W tym celu wystarczy użyć JavaScript. Oto mały kod, który utworzy dynamiczną stronę przekierowującą.
Powiedzmy, że po prostu umieściłeś ten fragment kodu w pliku redirect / index.html w swojej witrynie i możesz go używać w ten sposób.
http://www.mywebsite.com/redirect?url=http://stackoverflow.com
A jeśli przejdziesz do tego linku, automatycznie przekieruje Cię on do stackoverflow.com.
Link do dokumentacji
W ten sposób tworzysz prostą stronę przekierowania z JavaScriptem
Edytować:
Jest jeszcze jedna rzecz, na którą należy zwrócić uwagę. Dodałem window.location.replace do mojego kodu, ponieważ myślę, że pasuje do strony przekierowania, ale musisz wiedzieć, że podczas korzystania z window.location.replace i zostaniesz przekierowany, kiedy naciśniesz przycisk Wstecz w przeglądarce, nie wróciłem do strony przekierowania i wróci do poprzedniej strony, spójrz na to małe demo.
Przykład:
Proces: store home => przekierowanie strony do google => google
W google: google => przycisk Wstecz w przeglądarce => sklep w domu
Więc jeśli to odpowiada Twoim potrzebom, wszystko powinno być w porządku. Jeśli chcesz dołączyć stronę przekierowującą do historii przeglądarki, zamień to
if (url) window.location.replace (url);
z
if (url) window.location.href = url;
|
W funkcji klikania po prostu dodaj:
window.location.href = "Adres URL, na który chcesz przekierować";
$ ('# id'). click (function () {
window.location.href = "http://www.google.com";
});
|
Spróbuj tego:
location. assign („http://www.google.com”);
Fragment kodu przykładu.
|
jQuery nie jest potrzebne. Możesz to zrobić:
window.open ("URL", "_ self", "", "")
To takie proste!
Najlepszym sposobem zainicjowania żądania HTTP jest użycie document.loacation.href.replace („URL”).
|
Najpierw napisz poprawnie. Chcesz nawigować w aplikacji, aby znaleźć inne łącze ze swojej aplikacji, aby uzyskać inne łącze. Oto kod:
window.location.href = "http://www.google.com";
A jeśli chcesz nawigować po stronach w swojej aplikacji, mam też kod, jeśli chcesz.
|
Możesz przekierować w jQuery w ten sposób:
$ (lokalizacja) .attr ('href', 'http://yourPage.com/');
|
Korzystanie z JavaScript:
Metoda 1:
window.location.href = "http://google.com";
Metoda 2:
window.location.replace („http://google.com”);
Korzystanie z jQuery:
Metoda 1: $ (lokalizacja)
$ (lokalizacja) .attr ('href', 'http://google.com');
Metoda 2: funkcja wielokrotnego użytku
jQuery.fn.redirectTo = function (url) {
window.location.href = url;
}
jQuery (okno) .redirectTo („http://google.com”);
|
W JavaScript i jQuery możemy użyć następującego kodu do przekierowania jednej strony na inną:
window.location.href = "http://google.com";
window.location.replace ("page1.html");
|
ECMAScript 6 + jQuery, 85 bajtów
$ ({jQueryCode: (url) => location.replace (url)}). attr ("jQueryCode") ("http://example.com")
Proszę, nie zabijajja, to żart. To żart. To jest żart.
To „dostarczyło odpowiedzi na pytanie” w tym sensie, że poprosiło o rozwiązanie „wykorzystujące jQuery”, co w tym przypadku pociąga za sobą w jakiś sposób narzucenie go do równania.
Ferrybig najwyraźniej potrzebuje wyjaśnienia żartu (nadal żartuje, jestem pewien, że opcje w formularzu recenzji są ograniczone), więc bez dalszych ceregieli:
Inne odpowiedzi używają attr () jQuery na obiektach lokalizacji lub okna niepotrzebnie.
Ta odpowiedź również ją nadużywa, ale w bardziej absurdalny sposób. Zamiast używać go do ustawiania lokalizacji, używa attr () do pobrania funkcji, która ustawia lokalizację.
Funkcja nazywa się jQueryCode, mimo że nie ma w niej nic jQuery, a wywołanie funkcji somethingCode jest po prostu okropne, zwłaszcza gdy coś nie jest nawet językiem.
„85 bajtów” odnosi się do Code Golf. Gra w golfa nie jest oczywiście czymś, co należy robić poza polem golfowym, a ponadto ta odpowiedź wyraźnie nie jest w rzeczywistości golfem.
Zasadniczo kulić się.
|
JavaScript:
window.location.href = 'www.your_url.com';
window.top.location.href = 'www.your_url.com';
window.location.replace („www.your_url.com”);
JQuery:
var url = 'www.your_url.com';
$ (lokalizacja) .attr ('href', url);
$ (lokalizacja) .prop ('href', url); // zamiast lokalizacji możesz użyć window
|
Oto przekierowanie z opóźnieniem czasowym. Możesz ustawić czas opóźnienia na dowolny:
Tytuł Twojego dokumentu
Za 8 sekund nastąpi przekierowanie!
|
Można to zrobić na trzy główne sposoby:
window.location.href = 'blaah.com';
window.location. assign („blaah.com”);
i...
window.location.replace („blaah.com”);
To ostatnie jest najlepsze w przypadku tradycyjnego przekierowania, ponieważ nie zapisze strony, na którą przeszedłeś przed przekierowaniem w historii wyszukiwania. Jeśli jednak chcesz tylko otworzyć kartę za pomocą JavaScript, możesz użyć dowolnego z powyższych
EDYCJA: Prefiks okna jest opcjonalny.
|
1
2
Kolejny
Nie szukasz odpowiedzi? Przeglądaj inne pytania otagowane javascript jquery przekierowanie lub zadaj własne pytanie.